<template>
    <div class="login">
        <div class="login_img">
            <img src="../assets/logo.jpg" />
        </div>
        <div class="input_main">
            <!-- 手机号 -->
            <div class="inp">
                <input type="number" placeholder="请输入手机号" v-model="phone" />
            </div>
            <!-- 验证码 -->
            <div class="inp">
                <input type="number" placeholder="请输验证码" v-model="code" />
                <button class="getcode" v-on:click="getCode" :disabled="disabled">{{btnTitle}}</button>
            </div>
            <!-- 登录 -->
            <div class="inp">
                <mt-button type="primary" size="large" @click.native="login">注册并登录</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
    name: "login",
    data() {
        return {
            phone: "",
            code: "",
            btnTitle: "获取验证码",
            disabled: false
        };
    },
    methods: {
        // 获取验证码
        getCode() {
            if (this.verifyPhone()) this.countdown();
            this.$axios
                .get("/api/ai.login/send_code", {
                    params: { mobile: this.phone }
                })
                .then(res => {
                    console.log("res", res);
                    if (res.data.code == 200) {
                        Toast({
                            message: res.data.msg,
                            position: "middle",
                            duration: 5000
                        });
                    }
                });
        },
        // 验证手机号
        verifyPhone() {
            if (!this.phone) {
                Toast({
                    message: "手机号不能为空",
                    position: "middle",
                    duration: 2000
                });
                return false;
            } else if (!/^1[356789]\d{9}$/.test(this.phone)) {
                Toast({
                    message: "请输入正确的手机号",
                    position: "middle",
                    duration: 2000
                });
                return false;
            } else {
                return true;
            }
        },
        // 点击获取验证码按钮
        countdown() {
            let time = 10;
            let timer = setInterval(() => {
                if (time == 0) {
                    clearInterval(timer);
                    this.btnTitle = "获取验证码";
                    this.disabled = false;
                } else {
                    this.btnTitle = time + "秒后重试";
                    this.disabled = true;
                    time--;
                }
            }, 1000);
        },
        // 登录
        login() {
            this.$axios
                .post("/api/ai.login/login", {
                    mobile: this.phone,
                    code: this.code
                })
                .then(res => {
                    console.log("登录结果", res);
                    if (res.data.code) {
                        Toast({
                            message: "登录成功",
                            position: "middle",
                            duration: 2000
                        });
                        localStorage.setItem("login", true);
                        this.$router.push("/")
                    }
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 130px;
    .login_img {
        width: 150px;
        margin: 0 auto 30px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .input_main {
        width: 80%;
        margin: 60px auto 0;
        .inp {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border: 1px solid #ececec;
            border-radius: 5px;
            margin-top: 30px;
            display: flex;
            input {
                border: none;
                width: 68%;
                margin-left: 15px;
                line-height: 40px;
                color: #333;
                font-size: 14px;
            }
            .getcode {
                color: #1a6eff;
                font-size: 12px;
                height: 25px;
                width: 80px;
                margin: auto 0;
                background: none;
                border: none;
            }
        }
    }
}
</style>

